import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:goumao_app/Controller/gm_home_detail.dart';
import 'package:goumao_app/Model/gm_home_model.dart';

// ignore: must_be_immutable
class HomeScreen extends StatefulWidget {
  GMHomeModel? homeModel;

  HomeScreen({Key? key, this.homeModel}) : super(key: key);

  @override
  // ignore: library_private_types_in_public_api
  _homeScreenState createState() => _homeScreenState();
}

// ignore: camel_case_types
class _homeScreenState extends State<HomeScreen> {
  Future<GMHomeModel> _getHomeList() async {
    String jsonString =
        await rootBundle.loadString('assets/mydata/dog_ly.json');
    Map<String, dynamic> jsonData = json.decode(jsonString);
    var articleModel = GMHomeModel.fromJson(jsonData);
    return articleModel;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // actions: [
        //   InkWell(
        //     onTap: () => {
        //       Navigator.push(
        //         context,
        //         MaterialPageRoute(
        //           builder: (context) => const GMPetSendScreen(),
        //         ),
        //       )
        //     },
        //     child: Image.asset(
        //       'assets/images/gm_centet_add@2x.png',
        //       width: 25,
        //       height: 25,
        //     ),
        //   ),
        //   const SizedBox(
        //     width: 16,
        //   )
        // ],
        elevation: 0,
        title: const Text(
          '让领养代替购买',
          style: TextStyle(
              color: Color(0xFF1a1a1a),
              fontSize: 17,
              fontWeight: FontWeight.bold),
        ),
      ),
      body: SafeArea(
        child: FutureBuilder<GMHomeModel>(
          future: _getHomeList(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator(); // 显示加载指示器
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              GMHomeModel mModel = snapshot.data!;
              return GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, // 每行3个格子
                    crossAxisSpacing: 10.0, // 格子之间的水平间距
                    mainAxisSpacing: 10.0, // 格子之间的垂直间距
                    childAspectRatio: 5 / 6, // 宽高比为4:3
                  ),
                  itemCount: mModel.data!.length, // 列表总数
                  itemBuilder: (context, index) => InkWell(
                        onTap: () => {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                              builder: (context) => GMHomeDetailPage(
                                  homeData: mModel.data![index]),
                            ),
                          )
                        },
                        child: GridItem(index, mModel.data![index]),
                      ));
            }
          },
        ),
      ),
    );
  }
}

class GridItem extends StatelessWidget {
  final int number;
  final GMHomeData homeData;

  const GridItem(this.number, this.homeData, {super.key});

  Widget _gmTags(String tag, Color bgcolor, Color textColor) {
    return Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12),
          color: bgcolor,
        ),
        height: 24,
        padding: const EdgeInsets.only(left: 8, right: 8),
        child: Center(
          child: Text(
            homeData.sterilization!,
            style: TextStyle(color: textColor, fontSize: 12),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    final cellWight = (MediaQuery.of(context).size.width - 35) * 0.5;
    final cellHight = cellWight * 6 / 5.0;

    return Stack(
      alignment: Alignment.center,
      children: [
        Positioned(
          top: 30,
          width: cellWight,
          height: cellHight - 20,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(6),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.5), // 设置阴影颜色
                  spreadRadius: 2, // 设置阴影扩散的程度
                  blurRadius: 3, // 设置阴影模糊的程度
                  offset: const Offset(0, 3), // 设置阴影偏移量
                ),
              ],
            ),
          ),
        ),
        Container(
          padding: const EdgeInsets.fromLTRB(12, 0, 12, 8),
          width: cellWight,
          height: cellHight,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(35),
                child: Image.network(
                  "https://file.onepetmall.com/${homeData.files!.last.url}",
                  width: 70, // 设置图片宽度
                  height: 70, // 设置图片高度
                  fit: BoxFit.cover, // 设置图片填充模式
                ),
              ),
              const SizedBox(
                height: 12,
              ),
              Text(
                homeData.nick!,
                style: const TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontWeight: FontWeight.w500),
              ),
              const SizedBox(
                height: 16,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  _gmTags(homeData.age!, const Color(0xffFFE8E8),
                      const Color(0xffFF8386)),
                  const SizedBox(
                    width: 12,
                  ),
                  _gmTags(homeData.sex!, const Color(0xffF7F8FC),
                      const Color(0xff08DD98)),
                ],
              ),
              const SizedBox(
                height: 20,
              ),
              Expanded(
                  child: Text(
                homeData.story!,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(
                    color: Color(0xff666666),
                    fontSize: 14,
                    fontWeight: FontWeight.w100),
              ))
            ],
          ),
        )
      ],
    );
  }
}
